<template>
    <div class="outletQuery">
        <div class="outletQuery_search">
            <nut-searchbar @click="openAddress" placeholder="请选择省/市/区" @search="search" background="#fff"
                v-model="searchValue">
                <template v-slot:leftin>
                    <Locationg3 size="0.5rem" />
                </template>
                <template v-slot:rightin>
                    <triangle-down @click="rightClick" size="0.5rem" />
                </template>
            </nut-searchbar>
        </div>
        <view class="cu-card article place" v-show="isType == 2">
            <view class="cu-item shadow" v-for="item in placeDateList" :key="item.BRANCHCOMPANYNO">
                <view class="flex align-center padding-l20" style="padding: 0 24rpx">
                    <view class="place-icon"></view>
                    <view class="place-title">{{ item.companyName }}</view>
                </view>
                <view class="place-content solid-bottom::after">
                    <view>地址：{{ item.address }}</view>
                    <view class="margin-t6">电话：{{ item.tel }}</view>
                </view>
                <view class="flex align-center place-footer">
                    <view class="flex align-center justify-center width50 border_box footer-item br"
                        @click="lookMap(item)">
                        <view class="look-map"></view>
                        <view>查看地图</view>
                    </view>
                    <view class="flex align-center justify-center width50 border_box footer-item"
                        @click="toDial(item.tel)">
                        <view class="call"></view>
                        <view>拨打电话</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="outletQuery_container" v-show="isType == 1">
            <view class="outletQuery_container_empty">
                <image src="../../../assets/images/index/empty1.png"></image>
                <view class="text">暂无网点信息，请选择省/市/区</view>
            </view>
        </view>

      <SelectAddress
          :show="isShow"
          class="select_address"
          @selectAddress="selectAddress"
          @cancelSelectAddress="doClose"
          showonlyTF="true"
      />

      <dialBranch :show="showTelPopup" :tel="branchTel" :title="'拨打电话'" @close="showTelPopup=false" :show-close="true"></dialBranch>
    </div>
</template>
<script lang="ts" setup>
import SelectAddress from "@/components/pages/addressBook/SelectAddress";
import { ref, onMounted } from 'vue'
import Taro, { useReady } from '@tarojs/taro';
import { TriangleDown, Locationg3 } from '@nutui/icons-vue-taro';
import { getCompanyAddress, getRecommandBranch } from '@/@api/order';
import { $get,$post } from '@/@api'
import dialBranch from "@/components/dialBranch/index"
export interface Branch {
    COMPANYNAME: string,
    tel: string,
    LOCAL: string,
    LAT: string,
    LNG: string,
    BRANCHCOMPANYNO: any,
}
export interface SelectCity {
    carriagetype: string,
    province: string,
    city: string,
    detailaddress: string
}
const addressInfo = ref<string[]>([]);
/**
 * @function 查看地图
 * */
const lookMap = (item: Branch) => {
    Taro.openLocation({
        name: item.companyName,
        address: item.address,
        longitude: Number(item.localX || item.lng),
        latitude: Number( item.localY || item.lat),
        scale: 11
    })
}
/**
 * @function 拨打电话
 * */
//网点电话弹窗
const showTelPopup = ref<boolean>(false)
const branchTel = ref<string>('')
const toDial= async (tel) => {
  if(tel){
    branchTel.value = tel
    showTelPopup.value = true
  }
  else{
    Taro.showToast({
      icon: 'none',
      title: '该网点无联系方式'
    })
  }
}
const openAddress = () => {
    isShow.value = true
}
//const placeDateList = ref<Branch[]>([])
const placeDateList = ref<Branch[]>([])
/**
 * @function 获取当前位置
 * */

/**
 * @function 获取当前的省市区
 * */
async function getCity(lat: number, lng: number) {
    const res = await getCompanyAddress(lng + ',' + lat)

    const data = res.data.data.datas.addressComponent
    cityParams.value.province = data.province
    cityParams.value.city = data.city
    cityParams.value.detailaddress = data.district
    searchValue.value = `${data.province}-${data.city}-${data.district}`
    getDateList()
}
const isType = ref(1)
const searchValue = ref<string>('')

const search = () => {
}

const isShow = ref(false)
const rightClick = () => {

}

const cityParams = ref<SelectCity>({
    carriagetype: '送货',
    province: '',
    city: '',
    detailaddress: '',
})
const doClose = () => {
    isShow.value = false
}
/**
 * @function 选择地址
 * */
const selectAddress = (params) => {
    cityParams.value.province = params[0]
    cityParams.value.city = params[1]
    cityParams.value.detailaddress = params[2]
    getDateList()
    searchValue.value = params.join('-')
    isShow.value = false
}
/**
 * @function 获取网点列表
 * */
const getDateList = async () => {
    Taro.showLoading({ title: '查询中', })
    //const res = await getRecommandBranch(cityParams.value)
    const res:any = await $get('/selfmachine-system/branch/getBranchByArea',{
      province: cityParams.value.province,
      city: cityParams.value.city,
      administrativeDivision: cityParams.value.detailaddress,
    })
    Taro.hideLoading()

    placeDateList.value = res.data.rows || []
    if (placeDateList.value && placeDateList.value.length > 0) {
        isType.value = 2
    } else {
        isType.value = 1
    }
}

</script>


<style lang="scss">
page {
  background-color: #f5f5f5;
}
.outletQuery {
    height: 100%;

    background-color: #f5f5f5;
    box-sizing: border-box;
    padding: 0 0 20px 0;

    .place-footer {
        display: flex;
        justify-content: space-around;
    }

    .outletQuery_search {
        height: 96rpx;

        .nut-searchbar {
            height: 100%;

            .nut-searchbar__input-bar,
            .nut-searchbar__input-bar_clear {

                &::placeholder {
                    font-size: 26rpx;
                    color: #C4C4C4;
                }

            }
        }
    }

    .place {
        .cu-item {
            padding: 26rpx 0 0 0 !important;
        }
        box-sizing: border-box;
        height:93vh;
        overflow: auto;
        font-size: 30rpx;

        .place-title {
            color: #252525;
            font-weight: bold;
        }

        .place-icon {
            width: 34rpx;
            height: 34rpx;
            background: url('../../../assets/images/index/服务查询/shixiaojiage_icon_wangdian@2x.png') no-repeat;
            background-size: cover;
            margin-right: 20rpx;
        }

        .place-content {
            font-size: 24rpx;
            padding: 20rpx 20rpx 24rpx 66rpx;
            color: #666;
        }

        .place-footer {
            font-size: 28rpx;
            font-weight: bold;
            color: #252525;
          border-top: 1rpx solid #f5f5f5;
          .footer-item {
            padding: 26rpx 0;
            &.br {
              border-right: 1rpx solid #f5f5f5;
            }
          }

            .look-map {
                width: 28rpx;
                height: 28rpx;
                background: url('../../../assets/images/index/服务查询/wangdianchaxun_icon_chakanditu@2x.png') no-repeat;
                background-size: cover;
                margin-right: 10rpx;
            }

            .call {
                width: 28rpx;
                height: 28rpx;
                background: url('../../../assets/images/index/服务查询/wangdianchaxun_icon_bodadianhua@2x.png') no-repeat;
                background-size: cover;
                margin-right: 10rpx;
            }
        }
    }

    .outletQuery_container {
        height: calc(100% - 96rpx);
        background-color: #F5F5F5;
        position: relative;

        &::before {
            content: "";
            display: table;
        }

        .outletQuery_container_empty {
            width: 80%;
            margin: 280rpx auto;
            text-align: center;

            image {
                width: 300rpx;
                height: 344rpx;
            }
            .text {
              color: #999;
              font-size: 32rpx;
              font-weight: 48rpx;
            }

        }
    }

}
</style>
